<template>
  <div class="monthlypremium">
    <div class="book-list" v-for="(item, index) in fictionlist" :key="index">
      <div class="imgs">
        <img :src="item.fictionImg" alt="" />
      </div>
      <div class="conter">
        <div class="name">{{ item.titleName }}</div>
        <div class="username">{{ item.Author }}</div>
        <div class="infor-name">
          {{ item.introduce }}
        </div>
      </div>
      <router-link :to="'/noveldetail?id=' + item.id" tag="button"
        >立即阅读</router-link
      >
    </div>
    <div class="line">
      <hr size="1" color="#efefef" />
    </div>
    <div v-for="items in fictiontitle" :key="items.id">
      <div class="book-list-new">
        <router-link
          :to="'/noveldetail?id=' + items.id"
          tag="div"
          class="book-list-new"
          ><div class="tit-all">
            <div class="names"><span>[{{items.fictionType}}] </span>{{items.titleName}}</div>
          </div>
          <div class="brief">{{items.introduce}}</div></router-link
        >
      </div>
      <div class="line">
        <hr size="1" color="#efefef" />
      </div>
    </div>
  </div>
</template>

<script>
import { getFictionApi } from "../api/novelmain.js";

export default {
  data() {
    return {
      fiction: null,
      fictions: null,
      fictionlist: [],
      fictiontitle: [],
    };
  },
  methods: {
    getFictionApiFun() {
      getFictionApi({ id: this.$route.query.id }).then((data) => {
        let index = data.fiction.findIndex(
          (item) => item.id == this.$route.query.id
        );
        console.log("item", index);
        this.fiction = data.fiction[index];
        console.log("item", this.fiction);
      });
    },
    getFictionFun() {
      getFictionApi({ id: this.$route.query.id }).then((data) => {
        let index = data.fiction.findIndex(
          (item) => item.id == this.$route.query.id
        );
        console.log("items", index);
        this.fictions = data.fiction[index];
        console.log("items", this.fictions);
      });
    },
  },
  created() {
    // console.log(this.$route.query);
    if ("id" in this.$route.query) {
      this.getFictionApiFun();
      this.getFictionFun();
    }
  },
  mounted() {
    getFictionApi().then((data) => {
      // this.fiction = data.fiction;

      // 页面一加载的时候先出来三个对象的内容
      for (var i = 7; i < data.fiction.length; i++) {
        if (i < 8) {
          this.fictionlist.push(data.fiction[i]);
        }
      }

      for (var j = 5; j < data.fiction.length; j++) {
        if (j < 8) {
          this.fictiontitle.push(data.fiction[j]);
        }
      }
    });
  },
};
</script>

<style lang="scss" scoped>
.book-list-new {
  background: #fff;
  position: relative;
  padding: 5px;
  .tit-all {
    .names {
      -webkit-box-flex: 1;
      font-size: 15px;
      color: #2a2a2a;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      span {
        color: #666;
      }
    }
  }
  .brief {
    font-size: 12px;
    color: #999;
    margin-top: 10px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}
.conter .infor-name {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
</style>